html,
body {
  margin-top: 0px;
  font-family: sans-serif;
  font-size: 10px;
  background-color: ghostwhite;
}

.figura {
  border: 0px solid red;
  position: absolute;
  display: flex;
  width: 20%;
  top: 20%;
  left: 40%;
}

#cabezaImg {
  /*border: 1px solid blue;*/
  width: 100%;
  z-index: 0;
}

#ojosImg {
  /*border: 1px solid green;*/
  width: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

#narizImg {
  /*border: 1px solid green;*/
  width: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

#bocaImg {
  /*border: 1px solid green;*/
  width: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

.expli{text-align: center;
	color: transparent;
	 width: 100%;
  position: fixed;
  z-index: 2;
  top: 92%;
  left: 0px;
}

.page-header-actions{text-align: center;
  color: grey;
   width: 100%;
  position: fixed;
  z-index: 2;
  top: 90%;
  left: 0px;}

@media (max-width: 1023px){


  .figura{ width: 50%;
  left: 25%;
 }

  .expli{text-align: center;
  color: red;
   width: 100%;
  position: fixed;
  z-index: 2;
  top: 85%;
  left: 0px;
}

  .page-header-actions{text-align: center;
  color: grey;
   width: 100%;
  position: fixed;
  z-index: 2;
  top: 83%;
  left: 0px;}

   /*.figura{
 
  transform: rotate(90deg);
  height: 100%; 
  width: 100%;

  
  
}*/